<!DOCTYPE html>
<html lang="en" class="md device-pixel-ratio-3 device-retina device-desktop device-windows support-position-sticky">
<head>
    <meta charset="utf-8" />
    <meta name="theme-color" content="#000000" />
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" />
    <link rel="apple-touch-icon" href="favicon.ico" />
    <meta name="apple-mobile-web-app-title" content="坏坏漫画" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="referrer" content="never">
    <script type="text/javascript" src="js/debug.js"></script>
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>漫画分类</title>
    <link href="css/main.48b4036a.css" rel="stylesheet">
    <link href="css/aui.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="js/layer.js"></script>
    <script type="text/javascript" src="js/template-web.js"></script>
    <script type="text/javascript" src="js/aui-toast.js"></script>
    <script type="text/javascript" src="js/aui-dialog.js"></script>
    <script type="text/javascript" src="js/config.js" charset="utf-8"></script>
    <div style="display: none;">
    </div>

    <!-- <link rel="stylesheet" type="text/css" href="css/myui-cate.css?v=1"> -->

</head>

<body>
    <div id="root" style="height: 100%;">
        <div id="framework7-root" class="framework7-root">
            <div class="panel-backdrop"></div>
            <div class="panel panel-left panel-reveal">
                <div id="chapterDirectory" class="page">
                    <div class="page-content">
                        <div class="block-title">目录</div>
                        <div class="no-margin-bottom list virtual-list">
                            <ul id="leftpannel" style="height: 5667.84px;">
                                <li class="bg-color-default text-color-primary"
                                    style="height: 0.48rem; top: 0px; font-size: 110%; font-weight: 700;"><a
                                        class="item-link" href="#">
                                        <div class="item-content">

                                            <div class="item-inner">
                                                <div class="item-title">第1話-&lt;1&gt;</div>
                                            </div>
                                        </div>
                                    </a></li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-right panel-reveal">
                <!-- 侧边栏 -->
                <div class="page" id="right-page">
                    <script>
                        $("#right-page").load("right-page.html");
                    </script>
                </div>
            </div>
            <div class="view view-main">

                <div class="reader-index page page-current tabs" data-name="reader">
                    <div class="reader-index-toolbar toolbar toolbar-bottom-md tabbar tabbar-labels color-white">
                        <div class="toolbar-inner">
                            <a class="tab-link " href="/index.html" data-route-tab-id="home">
                                <div class="reader-index-toolbar-icon">
                                    <i class="icon_tj"></i>推荐
                                </div>
                            </a>
                            <a class="tab-link tab-link-active" href="/cate.html" data-route-tab-id="category">
                                <div class="reader-index-toolbar-icon">
                                    <i class="icon_fl"></i>分类
                                </div>
                            </a>
                            <a class="tab-link" href="/favorite.html" data-route-tab-id="bookshelf">
                                <div class="reader-index-toolbar-icon">
                                    <i class="icon_wdmh"></i>我的漫画
                                </div>
                            </a>
                            <a class="tab-link" href="/user.html" data-route-tab-id="personal">
                                <div class="reader-index-toolbar-icon">
                                    <i class="icon_zh"></i>账号
                                </div>
                            </a>
                            <span class="tab-link-highlight"
                                style="width: 25%; transform: translate3d(0%, 0px, 0px);"></span>
                        </div>
                    </div>
                    <div class="tabs-animated-wrap">
                        <div class="tabs" style="transform: translate3d(-100%, 0px, 0px);">
                            <div id="home" class="page-content tab"> </div>
                            <div id="category" class="page-content tab tab-active">
                                <div class="page" data-name="readerCategory">
                                    <div class="reader-home-navbar navbar color-white">
                                        <div class="navbar-inner sliding">
                                            <div class="title">分类</div>
                                            <div class="right">
                                                <a class="icon-big link icon-only" href="/search.html"><i
                                                        class="icon material-icons">search</i></a>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="page-content">
                                        <div class="tabs-animated-wrap">
                                            <div class="tabs" style="transform: translate3d(-000%, 0px, 0px);">
                                                <div id="reader-category-tab-cartoon-1552107120369"
                                                    class="tab tab-active"
                                                    style="overflow-y: auto; position: relative;">
                                                    <div class="page" data-name="readerCategoryTab">
                                                        <div class="no-padding page-content infinite-scroll-content">
                                                            <div class="no-margin list">
                                                                <ul>
                                                                    <li class="reader-category-buttons-item">
                                                                        <div class="item-content">
                                                                            <div class="item-inner">
                                                                                <div class="reader-category-buttons checkcatebox"
                                                                                    data-str="done">
                                                                                    <a class="display-inline-block button button-fill button-small"
                                                                                        data-value="2">全部</a>
                                                                                    <a class="display-inline-block button button-small button-small"
                                                                                        data-value="1">最新更新</a>
                                                                                    <a class="display-inline-block button button-small"
                                                                                        data-value="2">总点击</a>

                                                                                    <a class="display-inline-block button button-small"
                                                                                        data-value="0">连载中</a>
                                                                                    <a class="display-inline-block button button-small"
                                                                                        data-value="1">已完结</a>

                                                                                    <!-- <a class="display-inline-block button button-fill button-small" data-value="2">全部</a>
                                                                                <a class="display-inline-block button button-small" data-value="0">连载中</a>
                                                                                <a class="display-inline-block button button-small" data-value="1">已完结</a> -->
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                    <!-- <li class="reader-category-buttons-item">
                                                                    <div class="item-content">
                                                                        <div class="item-inner">
                                                                            <div class="reader-category-buttons checkcatebox" data-str="tag">
                                                                                <a href="javascript:void(0);" class="display-inline-block button button-fill button-small" style="min-width: 0.30rem;" data-value="0">全部</a>
                                                                                <a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="1">宅系</a><a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="2">搞笑</a>
                                                                                <a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="3">热血</a><a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="4">神鬼</a>
                                                                                <a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="5">悬疑</a><a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="6">爱情</a>
                                                                                <a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="7">耽美</a><a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="8">战争</a>
                                                                                <a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="9">都市</a><a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="10">穿越</a>
                                                                                <a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="11">纯爱</a><a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="12">伦理</a>
                                                                                <a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="14">灵异</a><a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="15">校园</a>
                                                                                <a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="16">灾难</a><a href="javascript:void(0);" class="display-inline-block button button-small" style="min-width: 0.30rem;" data-value="17">基情</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="reader-category-buttons-item">
                                                                    <div class="item-content">
                                                                        <div class="item-inner">
                                                                            <div class="reader-category-buttons checkcatebox2" data-str="order">
                                                                                <a href="javascript:void(0);" class="display-inline-block button button-small"  data-value="1">最新更新</a>
                                                                                <a href="javascript:void(0);" class="display-inline-block button button-small"  data-value="2">总点击</a>
                                                                                    
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li> -->
                                                                </ul>
                                                            </div>
                                                            <div class="no-margin list media-list-box">
                                                                <li class="padding-bottom-sm height-0 item-divider"><span></span></li>
                                                                <ul id="aui-media-list">
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="bookshelf" class="page-content tab"> </div>
                    <div id="personal" class="page-content tab"> </div>
                </div>
                <div class="framework7-modals"></div>
                <div class="actions-backdrop"></div>
                <div class="dialog-backdrop"></div>
                <div class="dialog dialog-buttons-1 dialog-buttons-vertical reader-copy-modal modal-in"
                    style="display: none; margin-top: -372px;">
                    <div class="dialog-inner">
                        <div class="dialog-title"></div>
                        <div class="dialog-text"></div>
                        <input id="foo" type="link" value="" readonly="">
                    </div>
                    <div class="dialog-buttons">
                        <span class="dialog-button dialog-button-bold text-align-center text-color-primary"
                            data-clipboard-action="copy" data-clipboard-target="#foo">复制链接</span>
                    </div>
                </div>
                <div class="popover-backdrop"></div>
                <div class="toast">
                    <div class="toast-content">
                        <div class="toast-icon"></div>
                        <div class="toast-text"></div>
                        <a class="toast-button"></a>
                    </div>
                </div>

            </div>
        </div>
        <script type="text/javascript" src="js/yymh.js"></script>
        <script src="js/clipboard.min.js"></script>

        <script type="text/html" id="booklist">
            {{each list  value i}}
                <li class="">
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="-margin-horizontal-sm flex-grow-1"><a class="reader-book reader-book-default reader-book-media" href="book.html?id={{value['id']}}">
                                    <div class="">
                                        <div class="cover">
                                            <img src="{{value['image']}}" alt="">
                                            {{if value['mhstatus']==0}}
                                                <span class="status" data-status="serialized">连载</span>
                                            {{/if}}
                                            {{if value['mhstatus']==1}}
                                                <span class="status" data-status="finish">完结</span>
                                            {{/if}}
                                            
                                            {{if value['tjswitch']==1}}
                                                <span class="type" data-type="recommend"></span>
                                            {{/if}}

                                            {{if value['isjingpin']==1}}
                                                <span class="type" data-type="competitive"></span>
                                            {{/if}}

                                            {{if value['xianmian']==1}}
                                                <span class="type" data-type="free_in_limit_time"></span>
                                            {{/if}}
                                        </div>
                                        <span class="name">{{value['title']}}</span>
                                        <p class="desc">{{value['desc']}}....</p>
                                        <div class="footer">
                                            <span class="score"><i class="icon material-icons">star</i> {{value['pingfen']}}</span>
                                            <span class="readCount"><i class="icon material-icons">remove_red_eye</i> {{value['view']}}</span>
                                            <span class="author">作者：{{value['auther']}}</span>
                                            <!-- <span class="badge">{{value['ticai']}}</span> -->
                                        </div>
                                    </div>
                                </a></div>
                        </div>
                    </div>
                </li>
            {{/each}}
        </script>


        <script type="text/javascript" src="js/aui-scroll.js"></script>
        <script type="text/javascript">
            window.page = 1;
            window.order = 1;
            window.tag = 0;
            window.done = 2;
            window.loading = false;

            //初始化过滤器事件
            function initFilterEvent() {
                $(".checkcatebox").find("a").click(function () {
                    var that = $(this);
                    var sv = that.data("value");
                    var ty = that.parents(".checkcatebox").data("str");
                    removeSel(this);
                    if (ty == "order") {
                        window.order = sv;
                    } else if (ty == "tag") {
                        window.tag = sv;
                    } else if (ty == "done") {
                        window.done = sv;
                    }
                    window.page = 1;
                    $(".aui-media-list").html("");
                    initGetCateData();
                });

                $(".checkcatebox2").find("a").click(function () {
                    var that = $(this);
                    var sv = that.data("value");
                    var ty = that.parents(".checkcatebox2").data("str");
                    if (ty == "order") {
                        window.order = sv;
                    } else if (ty == "tag") {
                        window.tag = sv;
                    } else if (ty == "done") {
                        window.done = sv;
                    }
                    window.page = 1;
                    $(".aui-media-list").html("");
                    $('#sheet-category-cartoon').toggle();
                    initGetCateData();
                });
            }

            //切换样式
            function removeSel(obj) {
                window.page = 1;
                obj.parentNode.getElementsByClassName("button-fill")[0].className = "display-inline-block button button-small";
                obj.className = "display-inline-block button button-fill button-small";
            }



            //加载更多
            function loadMore() {
                if ($('.reader-infinite-preloader').attr('lastpage') == 'false') {
                    window.page++;
                    initGetCateData();
                }
            }

            //初始化获取分类数据
            function initGetCateData() {
                $('.reader-infinite-preloader').text('正在加载中...');
                appCenter.doGetCateData(1, window.tag, window.done, window.order, window.page, function (data) {
                    var html = template("booklist", data);
                    //是否添加
                    if (window.page <= 1) {
                        $('#aui-media-list').html(html);
                    } else {
                        $('#aui-media-list').append(html);
                    }
                    //是否到底
                    if (data.lastPage) {

                        $('.reader-infinite-preloader').attr('lastpage', 'true');
                        $('.reader-infinite-preloader').text('数据到底');
                        window.loading = true;
                    } else {

                        $('.reader-infinite-preloader').attr('lastpage', 'false');
                        $('.reader-infinite-preloader').text('');
                        // $('.reader-infinite-preloader').text('点击加载更多');
                        window.loading = false;
                    }
                    $("img.lazy").lazyload();
                });
            }

            //初始化下拉刷新事件
            function initPullRefeshEvent() {
                var scroll = new auiScroll({
                    listen: true,
                    distance: 50
                }, function (ret) {
                    var framework7 = document.getElementById('category');
                    console.log(document.documentElement.scrollTop);
                    console.log(framework7.scrollTop);

                    console.log(document.body.scrollTop);
                    if (!window.loading && ret.isToBottom) {
                        window.loading = true;
                        // loadMore();
                        setTimeout(function () {
                            window.loading = false;
                        }, 1000);
                    }
                    if (ret.scrollTop == '200') {

                        alert(ret.scrollTop);

                    }
                });
            }
            // infinite-scroll-content
            // media-list-box
            $('.infinite-scroll-content').scroll(function () {
                // 当前元素的到顶部高度
                var scrollTop = $(this).scrollTop();
                // 当前元素滚动条总高度
                var scrollHeight = $(this)[0].scrollHeight;
                // 当前元素的高度
                var windowHeight = $(this).height();
                if (scrollTop + windowHeight >= scrollHeight) {
                    // 　　　　alert("已经到最底部了！");
                    if (!window.loading) {
                        loadMore();
                        window.loading = true;
                    }
                }
            });

            //初始化
            $(function () {
                // initBarBtn();
                // initRankFooter();
                initFilterEvent();
                initGetCateData();
                // initPullRefeshEvent();
            });
        </script>

</body>

</html>